import { useEffect } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
export default function Index() {
  useEffect(() => {
    AMapLoader.load({
      key: 'ab04fef11006cdec3826aea3b0d42bb2', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      Loca: {
        // 是否加载 Loca， 缺省不加载
        version: '1.3.2', // Loca 版本，缺省 1.3.2
      },
    })
      .then((AMap) => {
        const map = new AMap.Map('container', {
          pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
          viewMode: '3D', // 地图模式
        });
        const marker = new AMap.Marker({
          position: new AMap.LngLat(116.39, 39.9),
          offset: new AMap.Pixel(-10, -10),
          icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
          title: '北京',
        });
        map.add(marker);
        return map;
      })
      .catch((e) => {
        console.log(e);
      });
  });
  return <div id="container" style={{ height: '400px' }}></div>;
}
